{extend name="public/base"}

{block name="main"}
<div class="layui-card">
    <fieldset class="layui-elem-field site-demo-button" style="margin-top: 10px;border:0">
        <div class="layui-btn-group demoTable">
            <a href="javascript:;" class="layui-btn layui-btn-sm" onclick="open_page('添加角色', '{:url(\'save_role\')}')">添加角色</a>
        </div>
    </fieldset>
    <table class="layui-table" lay-size="sm" id="role_list" lay-filter="role_list"></table>
</div>

<script type="text/html" id="list_btn_group">

    {{# if(d.status == 99){ }}
        <button class="layui-btn layui-btn-xs" lay-event="edit_status">已开启</button>
    {{# } else { }}
        <button class="layui-btn layui-btn-xs layui-btn-warm" lay-event="edit_status">已关闭</button>
    {{# } }}
    <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="save">编辑</button>

    <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="set_auth">设置权限</button>
</script>
{/block}

{block name="js"}
<script type="text/javascript">
    layui.config({
        base: '/layui_admin/src/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table'], function () {
        let $ = layui.jquery, table = layui.table, admin = layui.admin;

        // 获取管理员列表
        let admin_list = table.render({
            elem: '#role_list'
            ,url: '{:url("index")}' //模拟接口
            ,cols: [[
                {type: 'numbers'}
                ,{field: 'name', title: '名称', width: 300}
                ,{field: '', title: '操作', toolbar: '#list_btn_group'}
            ]]
        });

        /**
         * 修改排序
         */
        table.on('edit(role_list)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
            //请求登入接口
            admin.req({
                url: "{:url('save_order')}" //实际使用请改成服务端真实接口
                ,data: {
                    id: obj.data.id,
                    order: obj.value
                }
                ,done: function(res){
                    //登入成功的提示与跳转
                    layer.msg('修改成功！', {
                        offset: '15px'
                        ,icon: 1
                        ,time: 1000
                    }, function(){
                        location.reload(); //刷新页面
                    });
                }
            });
        });

        //监听工具条
        table.on('tool(role_list)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            let data = obj.data; //获得当前行数据
            let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            let tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'save'){ //查看
                open_page('修改角色', "{:url('save_role')}?id=" + data.id);
                //do somehing
            } else if(layEvent === 'set_auth') {
                open_page('设置权限', "{:url('set_auth')}?id=" + data.id);
            } else if(layEvent === 'edit_status'){ //编辑状态
                layer.confirm('确定修改？', function(index) {
                    //请求登入接口
                    admin.req({
                        url: "{:url('save_status')}" //实际使用请改成服务端真实接口
                        ,data: {
                            id: data.id,
                            status: data.status == 99 ? 10 :99
                        }
                        ,done: function(res){
                            //登入成功的提示与跳转
                            layer.msg('修改成功', {
                                offset: '15px'
                                ,icon: 1
                                ,time: 1000
                            }, function(){
                                location.reload(); //刷新页面
                            });
                        }
                    });
                })
            }
        });
    });
</script>
{/block}